<template>
  <el-form label-position="top" :model="form" :rules="formRules" ref="form">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :label="$t('billing.firstName')" prop="firstName">
          <el-input v-model="form.firstName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="$t('billing.lastName')" prop="lastName">
          <el-input v-model="form.lastName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item :label="$t('billing.cardNumber')" prop="cardNumber">
      <el-input v-model="form.cardNumber"></el-input>
    </el-form-item>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item :label="$t('billing.expMonth')" prop="cardExpiryMonth">
          <el-input v-model="form.cardExpiryMonth"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item :label="$t('billing.expYear')" prop="cardExpiryYear">
          <el-input v-model="form.cardExpiryYear"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item :label="$t('billing.cvv')" prop="cardCvv">
          <el-input v-model="form.cardCvv"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import moment from 'moment'
export default {
  name: 'addCardForm',
  props: ['formData', 'EditChangeCardNumberAndCvv'],
  data () {
    const validCardNumber = numb => {
      const regex = new RegExp('^[0-9]{13,19}$')
      if (!regex.test(numb)) {
        return false
      }
      return luhnck(numb)
    }
    const luhnck = val => {
      let validsum = 0
      let k = 1
      for (let l = val.length - 1; l >= 0; l--) {
        let calck = 0
        calck = Number(val.charAt(l)) * k
        if (calck > 9) {
          validsum = validsum + 1
          calck = calck - 10
        }
        validsum = validsum + calck
        if (k === 1) {
          k = 2
        } else {
          k = 1
        }
      }
      return (validsum % 10) === 0
    }
    const checkCardNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('billing.plsCardNumber')))
      } else if (!validCardNumber(value)) {
        callback(new Error(this.$t('billing.plsCorrectCardNumber')))
      } else {
        callback()
      }
    }
    const checkYearMonth = (callback) => {
      const year = moment().year()
      const month = String(moment().month() + 1)
      const formYear = this.form.cardExpiryYear
      const formMonth = Number(this.form.cardExpiryMonth)
      const data1 = moment(`${year}-${month}`)
      const data2 = moment(`${formYear}-${formMonth}`)
      if (data1.isBefore(data2)) {
        callback()
      } else {
        callback(new Error(this.$t('billing.expDataError')))
      }
    }
    const checkCardExpiryYear = (rule, value, callback) => {
      const year = moment().year()
      if (value === '') {
        return callback(new Error(this.$t('billing.plsExpYear')))
      }
      if (!Number.isInteger(Number(value))) {
        return callback(new Error(this.$t('billing.plsCorrectYear')))
      }
      if (value && !this.form.cardExpiryMonth) {
        if (Number(value) >= year) {
          return callback()
        } else {
          return callback(new Error(this.$t('billing.expDataError')))
        }
      }
      checkYearMonth(callback)
    }
    const checkCardExpiryMonth = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error(this.$t('billing.plsExpMonth')))
      }
      if (!Number.isInteger(Number(value))) {
        return callback(new Error(this.$t('billing.plsCorrectMonth')))
      }
      if (this.form.cardExpiryYear && this.form.cardExpiryMonth) {
        checkYearMonth(callback)
      } else {
        callback()
      }
    }
    return {
      checkCardExpiryYear,
      checkCardExpiryMonth,
      checkCardNumber,
      form: this.formData
    }
  },
  watch: {
    formData (val) {
      this.form = val
    },
    form (val) {
      this.$emit('update:formData', val)
    },
    'form.cardNumber': function (val, oldValue) {
      if (val && oldValue && oldValue.includes('***')) {
        this.form.cardNumber = val.charAt(val.length - 1)
        if (this.form.cardCvv.includes('*')) {
          this.form.cardCvv = ''
        }
        this.EditChangeCardNumberAndCvv = false
      }
    },
    'form.cardCvv': function (val, oldValue) {
      if (val && oldValue && oldValue.includes('*')) {
        this.form.cardCvv = val.charAt(val.length - 1)
        if (this.form.cardNumber.includes('***')) {
          this.form.cardNumber = ''
        }
        this.EditChangeCardNumberAndCvv = false
      }
    }
  },
  computed: {
    formRules () {
      const roles = {
        firstName: [
          { required: true, message: this.$t('billing.plsFirstName'), trigger: 'blur' }
        ],
        lastName: [
          { required: true, message: this.$t('billing.plsLastName'), trigger: 'blur' }
        ],
        cardExpiryYear: [
          { validator: this.checkCardExpiryYear, trigger: 'blur' }
        ],
        cardExpiryMonth: [
          { validator: this.checkCardExpiryMonth, trigger: 'blur' }
        ]
      }
      const edit = {
        cardNumber: [
          { validator: this.checkCardNumber, trigger: 'blur' }
        ],
        cardCvv: [

          { message: this.$t('billing.plsSecurityCode'), trigger: 'blur' }
        ]
      }
      if (this.EditChangeCardNumberAndCvv) {
        return roles
      } else {
        return Object.assign({}, roles, edit)
      }
    }
  },
  methods: {
    submit() {
      return this.$refs['form'].validate();
    },
    resetForm() {
      this.$refs['form'].resetFields();
    }
  },
}
</script>

<style scoped>

</style>
